import React,{useState,useEffect} from "react";
import './index.css'
import {List , Typography} from 'antd' 
import CartItem from "./CartItem";

const Cart=()=>{
    const [cartData,setCartData]=useState(Array(5)
        .fill(undefined)
        .map((v,i)=>({
            id:i,
            name:`商品${i}`,
            checked:false,
            price:Math.round(Math.random()*100)
        }))
    )
    const [total,setTotal]=useState(0)
    const [checkedAll,setCheckedAll]=useState(false)
    const onCheckedChange=(item)=>{
        // console.log(item);
        // item->改变
        // setData->传一个数组
        let idx=cartData.findIndex(data=>item.id==data.id)
        console.log(idx);
        cartData[idx].checked=!cartData[idx].checked
        setCartData(
            [...cartData]
        )
    }
    const onWrapCheckedAllChange=()=>{
        let newData=cartData.map(item=>{
            item.checked=!checkedAll
            return item
        })
        setCartData(
            [...newData]
        )
    }
    const Footer=(
        <div className="footer">
            <div className="check-all">
                <input
                    checked={checkedAll}
                    onChange={onWrapCheckedAllChange}
                    type="checkbox"/>
            </div>
            全选
            <div>
                价格总计<Typography.Text mark>${total}</Typography.Text>
            </div>
        </div>
    )

    useEffect(()=>{
        //mounted
        //update
        // console.log('???');
        let totalprice=cartData
            .filter(item=>item.checked)
            .reduce((prev,item)=>{
                return prev + item.price
            },0)
        setTotal(totalprice)

        setCheckedAll(cartData.every(({checked})=>checked))
    },[cartData])

    return(
        <div className="cart">
            <List
                header={<div>购物车</div>}
                footer={Footer}
                bordered
                dataSource={cartData}
                renderItem={item=>{
                    return(
                        <List.Item>
                            <CartItem 
                                item={item}
                                onCheckedChange={onCheckedChange}
                            />
                        </List.Item>
                    )
                }}
            />
        </div>
    )
}

export default Cart